<template>
  <view class="wrap">
    <u-navbar
      back-icon-size="40"
      title="健康服务及会员福利"
      title-width="300rpx"
      class="nav"
    >
      <!-- <u-icon name="wodedingdan" class="wddj" custom-prefix="custom-icon" size="60" color="#000000" @click="mypage"></u-icon> -->
    </u-navbar>
    <view v-if="true">
      <view class="cardinfo">
        <p class="title">健康服务说明</p>
        <p class="texts">便于社区居民享受优质、便捷、优惠的健康服务的功能</p>
      </view>
      <shortcut
        ref="shortcut"
        :infos="iscard"
        :child="idx"
        v-show="isShowMenu"
        @closeMenu="closeMenu"
      ></shortcut>
    </view>
    <view v-if="false">
      <u-swiper :list="listimg" name="imgUrl" :effect3d="true"></u-swiper>
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#18C7E2"
          inactive-color="#000000"
          ref="tabs"
          height="100"
          bar-width="60"
          :list="list"
          :current="current"
          name="classifyName"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
          font-size="32"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="item in list">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view class="card" v-for="(item, index) in listprice">
              <view class="top">
                <u-row gutter="16">
                  <u-col span="8">
                    <view @click="bindtap(index)">
                      <h3>{{ item.goodsName }}</h3>
                    </view>
                  </u-col>
                  <u-col span="4">
                    <view class="price"
                      >￥<span>{{ item.goodsPrice }}</span
                      >.00元</view
                    >
                  </u-col>
                </u-row>
                <u-row gutter="16">
                  <u-col span="10">
                    <view class="context">{{ item.remk }}</view>
                  </u-col>
                </u-row>
                <view class="plus" v-show="item.stock != 'wkc'">
                  <u-number-box
                    class="step"
                    :disabled-input="true"
                    :min="0"
                    :max="90"
                    :index="index"
                    v-model="item.state - 1"
                    @change="changnumber"
                    @minus="fucount"
                    @plus="pluscount"
                    @color="black"
                    bg-color="none"
                  ></u-number-box>
                </view>
                <view class="plus" v-show="item.stock == 'wkc'">
                  <u-tag
                    text="缺货"
                    type="warning"
                    style="border-radius: 0 0 30rpx 0"
                  />
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
      <view :class="['buycar', bindindex > 0 ? '' : 'disbuy']" @click="tz()">
        <span class="gnum">{{ jieguo }}</span>
        <u-icon name="gouwuche" custom-prefix="custom-icon" size="80"></u-icon>
      </view>
      <u-toast ref="uToast" />
    </view>
    <shortcut
      ref="shortcut"
      :infos="iscard"
      :child="idx"
      v-show="isShowMenu"
      @closeMenu="closeMenu"
    ></shortcut>
  </view>
</template>
<script>
import shortcut from "../../components/shortcut/shortcut.vue";
export default {
  components: {
    shortcut,
  },
  data() {
    return {
      bindindex: -1,
      value: 0, //计数器初始值
      item: {},
      list: [], //后台数据
      listimg: [], //轮播图
      listprice: [], //card 数据
      current: 0,
      swiperCurrent: 0,
      jieguo: 0,
      succbtn: {
        //弹出按钮自定义样式
        color: "white",
        backgroundColor: "#18C7E1",
      },
      isShowMenu: false,
      iscard: "",
      idx: "", //营养包
      aaa: "",
      bbb: "",
    };
  },
  onShow() {
    //console.log('test');
    this.list = [];
    this.listpric = [];
    this.bindindex = -1;
    this.getadd();
    this.show = true;
    this.isShowMenu = false;
    setTimeout((s) => {
      this.isReport();
      this.getIdx();
    }, 300);
  },
  mounted() {
    uni.onTabBarMidButtonTap((s) => {
      this.isShowMenu = !this.isShowMenu;
    });
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    isReport() {
      let self = this;
      this.config
        .get("/initUser/pdCommonIsArchives", {})
        .then(({ data: { data } }) => {
          // console.log(data)  //1显示  0不显示
          this.iscard = data;
        });
    },
    getIdx() {
      console.log(123);
      this.config.get("/flow/getUserNutrition").then((res) => {
        console.log(res);
        this.idx = res.data.data;
      });
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      this.aaa = style;
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    closeMenu(msg) {
      this.isShowMenu = false;
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      //console.log(this.list[index].id)
      this.sendata(this.list[index].id);
    },
    sendata(id) {
      //请求列表信息
      uni.request({
        url: this.config.URL + "/goods/goodListByCifyId",
        method: "GET",
        data: {
          id: id,
        },
        success: (res) => {
          //console.log(res.data.data);
          this.listprice = res.data.data;
          this.qd = this.listprice[0].id;
        },
      });
    },
    buycaradd(id, count) {
      //添加购物车  (注意token)
      this.config
        .post("/cart/addCartItem", {
          goodsId: id,
          quantity: count,
        })
        .then((res) => {
          if (res.data.code === 200) {
            //console.log(res.data.data)
          }
        });
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    changnumber(e) {
      //接收计数器最终的值
      let idx = e.index;
      let val = e;
      this.bindindex = this.jieguo;
    },
    pluscount(e) {
      //增加
      //console.log(e)
      let idx = e.index;
      this.jieguo = this.jieguo + 1; //购物车计数
      let cardidx = this.listprice[idx].id;
      let cnum = 1;
      this.buycaradd(cardidx, cnum);
      //console.log(cardidx, cnum)
    },
    fucount(e) {
      //减少
      let idx = e.index;
      this.jieguo = this.jieguo - 1;
      let cardidx = this.listprice[idx].id;
      let cnum = -1;
      this.buycaradd(cardidx, cnum);
      //console.log(this.jieguo)
    },
    mypage() {
      //右上角我的订单
      uni.navigateTo({
        url: "./shoplist_page",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    tz() {
      uni.navigateTo({
        url: "./spxiangq_page",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    bindtap(index) {
      //console.log(e)
      let idx = this.listprice[index];
      let name = idx.goodsName;
      let price = idx.goodsPrice;
      let kc = idx.stock;
      let id = idx.id;
      if (kc != "wkc") {
        uni.navigateTo({
          url: "./xqy_page?name=" + name + "&price=" + price + "&id=" + id,
        });
      } else {
        this.$refs.uToast.show({
          title: "当前商品缺货，请谅解",
          type: "warning",
        });
      }
    },
    getadd() {
      //console.log('这里请求数据');
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      uni.request({
        url: this.config.URL + "/healthService/getHealthServerList",
        method: "GET",
        success: (res) => {
          // //console.log(res.data.data);
          this.listimg = res.data.data;
        },
      });
      uni.request({
        url: this.config.URL + "/goods/goodClassifyList",
        method: "GET",
        success: (res) => {
          uni.hideLoading();
          this.list = res.data.data;
          this.sendata(this.list[0].id);
        },
      });
    },
  },
};
</script>

<style scoped>
/* #ifndef H5 */
page {
  height: 100%;
}

/* #endif */
</style>
<style lang="scss" scoped>
.cardinfo {
  width: 530rpx;
  height: 622rpx;
  background-color: #ffffff;
  padding: 10rpx;
  color: #a79b9b;

  .title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20rpx;
  }

  .texts {
    font-size: 15px;
    line-height: 70rpx;
  }
}

.page-box {
  margin-bottom: 120rpx;
}

// .wrap {
// 		display: flex;
// 		flex-direction: column;
// 		height: calc(100vh - var(--window-top));
// 		width: 100%;
// 		position: fixed;
// 		background-color: #f2f2f2;
.wrap {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: calc(100vh - var(--window-top));
  width: 100%;
  position: fixed;
  background-color: #ffffff;

  .nav {
    position: relative;
    color: red;

    .wddj {
      position: absolute;
      top: 12rpx;
      right: 22rpx;
      z-index: 1000;
    }
  }

  .u-tabs-box {
    margin-top: 30rpx;
  }

  .disbuy {
    display: none;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    /*初始状态 透明度为0*/
    40% {
      opacity: 0;
    }

    /*过渡状态 透明度为0*/
    100% {
      opacity: 1;
    }

    /*结束状态 透明度为1*/
  }

  @-webkit-keyframes fade-in {
    /*针对webkit内核*/
    0% {
      opacity: 0;
    }

    40% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    /*初始状态 透明度为0*/
    40% {
      opacity: 1;
    }

    /*过渡状态 透明度为0*/
    100% {
      opacity: 0;
    }

    /*结束状态 透明度为1*/
  }

  @-webkit-keyframes fade-out {
    /*针对webkit内核*/
    0% {
      opacity: 1;
    }

    40% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .buycar {
    //购物车
    width: 150rpx;
    height: 150rpx;
    position: fixed;
    background-color: white;
    box-shadow: -4px 4px 11px -2px #9a9a9a;
    border-radius: 50% 0 0 50%;
    right: 0;
    bottom: 0;
    padding: 48rpx 0 0 40rpx;
    animation: fade-in;
    /*动画名称*/
    animation-duration: 0.5s;
    /*动画持续时间*/
    -webkit-animation: fade-in 0.5s;
    margin-bottom: 120rpx;

    /*针对webkit内核*/
    .gnum {
      display: block;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      border-radius: 50%;
      background-color: #ffc800;
      position: absolute;
      right: 30rpx;
      top: 10rpx;
      color: white;
      font-weight: bold;
    }
  }
}

.swiper-item {
  height: 100%;
}

.swiper-box {
  flex: 1;

  .card {
    background-color: #ffffff;
    border-radius: 15rpx 5rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    position: relative;
    border-radius: 30rpx;

    .top {
      margin-top: 20rpx;
    }

    .top h3 {
      font-size: 36rpx;
    }

    .price {
      font-weight: bold;
      color: red;

      span {
        font-size: 36rpx;
      }
    }

    .context {
      width: 90%;
      height: 90rpx;
      color: #7b7b7b;
      overflow: hidden;
      padding-top: 20rpx;
    }

    .plus {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .wrap {
    background-color: #1b1c1e !important;
  }

  .cardinfo {
    background-color: #1b1c1e !important;
    color: #ffffff;
  }
}
</style>
